<template>
    <div class="border">
        <div style="padding: 20px;font-size: 24px">{{sName}}</div>
        <el-empty v-if="studentlist==''" description="暂无信息">
            为该学生添加课程吧
            <el-button v-if="sName!=''" @click="addstuclass" type="primary">添加课程</el-button>
        </el-empty>
        <div v-else class="content">


            <el-table
                    border
                    :data="studentlist"
                    stripe
                    style="width: 95%; margin: 20px"
            >
                <el-table-column prop="cId" label="课程号" ></el-table-column>
                <el-table-column prop="cName" label="课程名" ></el-table-column>
                <el-table-column prop="score" label="学生成绩"></el-table-column>
                <el-table-column label="操作" >
                    <template #default="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                        >修改成绩
                        </el-button
                        >
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除
                        </el-button
                        >

                    </template>
                </el-table-column>
            </el-table>
            <el-button style="margin-left: 1080px" @click="addstuclass" type="primary">添加课程</el-button>
            <div >
            </div>
        </div>
        <el-dialog title="添加课程" v-model="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="课程列表" :label-width="formLabelWidth">
                    <el-select v-model="form.cId" placeholder="请选择课程">


                        <el-option  v-for="(item) in classlist" :key="item.cName"  :label="item.cName" :value="item.cId"></el-option>

                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addclassbystu">确 定</el-button>
    </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import {addScore,getStudentByid,studentscore,addgrade,deleteCourse}from '../network/student';
    import {getclass} from "../network/class"


    export default {
        computed: {
            ...mapState(['stuId'])
        },
        name: "querystudent",
        created() {
            this.getlist()
            if(this.stuId!=''){
                getStudentByid(this.stuId).then((res)=>{
                    this.sName = res.data.students[0].sName
                })
            }
        },
        data(){

            return{
                score:'',
                cId:'',
                studentlist:[],
                sName:'',
                dialogFormVisible:false,
                classlist:[],
                form: {
                    cId:'',
                },
            }
        },
        methods:{
            handleEdit(i){
                this.$prompt('请输入成绩', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^((\d{1,2})|(1[0-4]\d)|(150))$/,
                    inputErrorMessage: '成绩输入只能0-150'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: "修改成功"
                    });
                    this.score = value
                    this.cId=this.studentlist[i].cId
                    addScore(this.stuId,this.cId,this.score).then(()=>{
                        this.getlist()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            handleDelete(i){
                this.cId=this.studentlist[i].cId
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        deleteCourse(this.stuId,this.cId).then(()=>{
                            this.getlist()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            },
            getlist(){
                studentscore(this.stuId).then((res)=>{
                    this.studentlist =res.data
                })
            },
            addstuclass(){
                this.dialogFormVisible=true
                getclass().then((res)=>{
                    this.classlist = res.data.courses;
                })
            },
            addclassbystu(){
                this.dialogFormVisible=false
                addgrade(this.stuId,this.form.cId).then((res)=>{
                    if (res.data!=''){
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.getlist()
                    }else {
                        alert("添加失败")
                    }
                })

            }

        }
    }
</script>

<style scoped>
    .border {
        width: 1220px;
        height: 600px;
        background-color: white;
    }
    .content{

    }
</style>
